<template>
  <div class="app-container calendar-list-container">
    <!-- filter 条件查询 -->
    <div class="filter-container">
      <el-form :inline="true">
          <el-form-item :label="$t('financial.Available_for_withdraw')">
              <span style="font-size:22px">{{withdrawal}}</span>{{$t('financial.yuan')}}
          </el-form-item>
          <el-button class="filter-item" type="primary" v-waves icon="el-icon-circle-plus-outline" @click="newWithdrawal = true">{{$t('financial.Apply_withdraw')}}</el-button>
          <el-form-item :label="$t('financial.Cardholder_name')" style="margin-left:20px">
            <el-input @keyup.enter.native="handleFilter" clearable v-model="listQuery.realName" style="width: 200px;" class="filter-item" :placeholder="$t('financial.Please_enter_cardholder_name')" >
            </el-input>
          </el-form-item>
          <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('financial.Find')}}</el-button>
      </el-form>          
    </div>
   <!-- table 表格 -->
    <el-table  :data="list" v-loading="loading.list" :element-loading-text="$t('financial.give_me_time')" border fit highlight-current-row
      style="width: 100%">
      <el-table-column  :label="$t('financial.Number')"  prop="cashRequestId"/>
      <el-table-column  :label="$t('financial.Cardholder_name')" prop="realName"/>
      <el-table-column  :label="$t('financial.Withdraw_amount')" >
        <template slot-scope="scope">
            {{ scope.row.amount + $t('financial.yuan')}}
        </template>
      </el-table-column>
      <el-table-column  :label="$t('financial.Cardholder_phone_number')" prop="phoneNumber" />
      <el-table-column  :label="$t('financial.Bank_name')" prop="bankName" />
      <el-table-column  :label="$t('financial.Branch_name')" prop="branchName" />
      <el-table-column  :label="$t('financial.Withdrawal_status')" >
        <template slot-scope="scope">
          <span v-if='scope.row.status'>{{scope.row.status == 1 ? $t('financial.Under_review')+'':scope.row.status == 2 ? $t('financial.Pass')+'':$t('financial.Turn_down')+''}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column  :label="$t('financial.Application_time')" prop="cTime" >
        <template slot-scope="scope">
          <span v-if="scope.row.cTime">{{scope.row.cTime | parseTime}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column  :label="$t('financial.Rejected_reason')" prop="nayReason" />
      <el-table-column  :label="$t('financial.Operate')">
        <template slot-scope="scope" v-if="scope.row.status == 1">
          <el-button type="text" @click="passList(scope.row.cashRequestId)">{{$t('financial.Pass')}}</el-button>
          <el-button type="text" style='color:red' @click="BackBack(scope.row.cashRequestId)">{{$t('financial.Turn_down')}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增提现 -->
    <el-dialog :title="$t('financial.New_withdrawal')" :visible.sync="newWithdrawal" style="width:800px;margin:0 auto;">
        <el-form :model="newForm" :rules='bindRules' ref="bindForm1">
        <el-form-item :label="$t('financial.Name')" prop="realName">
            <el-input v-model="newForm.realName" style="width:200px;margin-right:10px;margin-left:25px"></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Phone_number')" prop='phoneNumber'>
            <el-input v-model="newForm.phoneNumber" maxlength="11" style="width:200px;margin-right:10px;"></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Bank_card_number')" prop='bankNumber'>
            <el-input v-model="newForm.bankNumber" maxlength="19" @keyup.native="onlyNum" style="width:200px;margin-right:10px"></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Bank')" prop='bankName'>
            <el-input v-model="newForm.bankName" style="width:200px;margin-right:10px"></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Branch')" prop='branchName'>
            <el-input v-model="newForm.branchName"  style="width:200px;margin-right:10px"></el-input>
        </el-form-item>
        <el-form-item :label="$t('financial.Withdraw_amount')" prop='amount'>
            <el-input v-model="newForm.amount" type="number" style="width:200px;margin-right:10px"></el-input>
        </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="newWithdrawal = false">{{$t('financial.Cancel')}}</el-button>
            <el-button type="primary" @click="getWithdrawal">{{$t('financial.Submit')}}</el-button>
        </div>
    </el-dialog>
    <!-- 驳回理由 -->
    <el-dialog :title="$t('financial.Rejected_reason')" :visible.sync="backVisible" style="width:1000px;margin:0 auto;">
        <el-input
            type="textarea"
            :rows="10"
            :placeholder="$t('financial.Please_enter_rejected_reason')"
            v-model="textarea">
        </el-input>
        <div slot="footer" class="dialog-footer">
        <el-button @click="backVisible = false">{{$t('financial.Cancel')}}</el-button>
        <el-button type="primary" @click="BackList">{{$t('financial.Submit')}}</el-button>
        </div>
    </el-dialog>
    <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination 
        background 
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange" 
        :current-page="listQuery.pageNo" 
        :page-sizes="[10, 20, 30, 40]" 
        :page-size="listQuery.pageSize" 
        layout="total, sizes, prev, pager, next, jumper" 
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { validatePhone } from '@/utils/validate'
import CountTo from 'vue-count-to'
import { getCashRequestListByPageConitdion, addCashRequest,updateCashRequestStatus, getCashRequestBalance } from '@/api/financial'
export default {
  name: 'financial_getPrice',
  components: {
    CountTo,
  },
  data() {
    var validatePass = (rule, value, callback) => {
        if (!validatePhone(value)) {
            return callback(new Error(this.$t('financial.Please_enter_the_correct_mobile_number')));
        } else {
            callback();
        }
    };
    return {
        total: 0,
        listQuery: {
            pageNo: 1,
            pageSize: 10,
            realName: ''
        },
        list: null,
        loading:{
            list: false,
            download: false
        },
        withdrawal:'',
        backVisible:false,
        id:'',
        textarea:'',
        formLabelWidth: '120px',
        newWithdrawal:false,
        newForm:{
            realName:'',
            phoneNumber:'',
            bankNumber:'',
            bankName:'',
            branchName:'',
            amount:'',
        },
        bindRules:{
            realName: [
                { required: true, message: this.$t('financial.Please_type_in_your_name'), trigger: 'change' }
            ],
            phoneNumber: [
                { required: true, message: this.$t('financial.Please_enter_the_phone_number'), trigger: 'blur' },
                { validator: validatePass, trigger: 'blur' }
            ],
            bankNumber: [
                { required: true, message: this.$t('financial.Please_enter_the_bank_card_number'), trigger: 'blur' }
            ],
            bankName: [
                { required: true, message: this.$t('financial.Please_enter_your_bank'), trigger: 'blur' }
            ],
            branchName: [
                { required: true, message: this.$t('financial.Please_enter_the_branch_branch'), trigger: 'blur' }
            ],
            amount:  [
                { required: true, message: this.$t('financial.Please_enter_the_amount_of_cash'), trigger: 'blur' }],
            },
        }
    },
    created() {
        this.getList()
        this.getPrice()
    },
    methods: {
        //验证银行卡号输入
     onlyNum(){
     this.newForm.bankNumber = this.newForm.bankNumber.replace(/\D/g,"");
    },
        //可提现金额
        async getPrice(){
            const { data } = await getCashRequestBalance()
            this.withdrawal = data
        },
        // 申请提现
        getWithdrawal(){
            this.$refs['bindForm1'].validate(async (valid) => {
            if(valid){
                this.loading.list=true
            try {
                const { data } = await addCashRequest(this.newForm)
                this.$message({
                    type:'success',
                    message: this.$t('financial.added_successfully')
                })
                this.$refs['bindForm1'].resetFields()
                this.newWithdrawal = false
                this.getList()
                this.getPrice()
                } catch (error) {
                
                }
                this.loading.list = false
            }  
            })
        },
        //办公列表 
        async getList() {
            this.loading.list = true
            try {
                const { data } = await getCashRequestListByPageConitdion(this.listQuery)
                this.list = data.records.map((item, index) => ({
                index: index + 1,
                ...item
                }))
                this.total = data.total
            } catch (error) {        
            }
            this.loading.list = false     
        },
        //驳回理由
        BackBack(id){
            this.id = id
            console.log(this.id)

            this.backVisible = true
        },
        //驳回成功
        BackList() {
            if(this.textarea == '')
            {
                this.$message({
                    message:this.$t('financial.Please_enter_rejected_reason'),
                    type:'error'
                })
            }
            else{(async() =>{
                this.loading.list=true
                try{
                    const { data } = await updateCashRequestStatus({ 
                        cashRequestId:this.id,
                        status:3,
                        nayReason:this.textarea,
                    })
                    this.$message({
                    type: 'success',
                    message: this.$t('financial.Dismissed')
                    });
                    this.backVisible = false
                    this.getList()
                    this.getPrice()
                }
                catch(error){
                }
                    this.loading.list = false
                })
            }  
        },
        //通过
        async passList(id) {    
            console.log(id)
            const { data } = await updateCashRequestStatus({
                cashRequestId:id,
                status:2,
            })
            this.$message({
            type: 'success',
            message: this.$t('financial.passed')
            });
            this.getList()
            this.getPrice()
        },
        handleFilter() {
            this.listQuery.pageNo = 1
            this.getList()
            this.getPrice()
        },
        handleSizeChange(val) {
            this.listQuery.pageSize = val
            this.getList()
            this.getPrice()
        },
        handleCurrentChange(val) {
            this.listQuery.pageNo = val
            this.getList()
            this.getPrice()
        }
    }
}
</script>

